<template>
  <div
    class="uni-scroll app-container"
    style="height: calc(100vh - 100px)"
  >
    <el-row :gutter="5">
      <el-col :span="24">
        <span>("key":"value",key根据实际上传的数据装换为相应字段,页面末尾有字段解析，根据产品自行查看，映射即为传感器)</span>
        <json-editor v-model="deviceProtocolWarp" />
      </el-col>
      <el-col :span="24">
        <el-form :inline="true" style="margin-top: 13px">
          <el-form-item>
            <el-select v-model="productId" @change="listProductTemplate">
              <el-option
                v-for="item in productList"
                :key="item.productId"
                :label="item.name"
                :value="item.productId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="templateType" @change="listProductTemplate">
              <el-option :label="$t('explain')" value="explain" />
              <el-option :label="$t('setting')" value="setting" />
              <el-option :label="$t('param')" value="param" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="name"
              clearable
              :placeholder="$t('name')"
              @change="listProductTemplate"
            />
          </el-form-item>
          <el-button
            type="primary"
            @click="listProductTemplate"
          >{{ $t('search') }}
          </el-button>
          <el-button
            type="primary"
            @click="download"
          >{{ $t('download') }}
          </el-button>
          <el-form-item />
        </el-form>
        <el-table
          :data="productTemplateList"
          style="width: 100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="productId" width="50" >
            <template slot-scope="scope">
              <el-image
                :src="scope.row.iconUrl"
                style="width: 25px;height: 25px"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('name')" >
            <template slot-scope="scope">
              <span @click="dictionaries(scope.row)">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="keyName" :label="$t('keyName')"  />
          <el-table-column prop="unit" :label="$t('unit')"  />
          <el-table-column

            :label="$t('explain')+' / '+$t('setting')+$t('type')"
          >
            <template slot-scope="scope">
              <span v-if="templateType === 'explain'" style="margin-left: 13px">{{ formatExplainType(scope.row.type) }}</span>
              <span v-else-if="templateType === 'setting'" style="margin-left: 13px">{{ formatSettingType(scope.row.type) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('hidden')" >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.hidden"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('linkage')" >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.canDeviceLinkage"
                disabled
              />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { failureNotice, formatExplainType, formatSettingType } from '@/util/common'
import { getSystemHookDocument } from '@/api/iot/iotSystemHookApi'
import { productDeviceNum } from '@/api/iot/iotDeviceBelongApi'
import { listProductTemplateExplain } from '@/api/iot/iotProductTemplateExplainApi'
import { listProductTemplateSetting } from '@/api/iot/iotProductTemplateSettingApi'
import JsonEditor from '@/components/JsonEditor/index'
import { downloadExcel } from '@/util/file'
import { listProductTemplateParam } from '@/api/iot/iotProductTemplateParamApi'

export default {
  name: 'HookDoc',
  components: {
    JsonEditor
  },
  data() {
    return {
      productId: null,
      templateType: 'explain',
      productList: [],
      productTemplateList: [],
      deviceProtocolWarp: {},
      name: null,
      chooseTemplateIdList: []
    }
  },
  created() {
    this.getSystemHookDocument()
    this.productDeviceNum()
  },
  methods: {
    handleSelectionChange(val) {
      const chooseTemplateIdList = []
      val.forEach(function(row) {
        chooseTemplateIdList.push(row.templateId)
      })
      this.chooseTemplateIdList = chooseTemplateIdList
    },
    download() {
      const downloadData = []
      const downloadColumnNameList = [
        this.$t('name'),
        this.$t('keyName'),
        this.$t('unit'),
        this.$t('explain') + ' / ' + this.$t('setting') + this.$t('type')
      ]
      for (let i = 0, j = this.productTemplateList.length; i < j; i++) {
        const template = this.productTemplateList[i]
        if (this.chooseTemplateIdList.indexOf(template.templateId) < 0) {
          continue
        }
        let typeString
        switch (this.templateType) {
          case 'explain':
            typeString = this.formatExplainType(template.type)
            break
          case 'setting':
            typeString = this.formatSettingType(template.type)
            break
          default:
            typeString = ''
        }
        downloadData.push({
          name: template.name,
          keyName: template.keyName,
          unit: template.unit,
          type: typeString
        })
      }
      for (const item of this.productList) {
        if (item.productId === this.productId) {
          downloadExcel(item.name + '(' + this.$t(this.templateType) + ')', downloadColumnNameList, downloadData)
          break
        }
      }
    },
    formatSettingType(type) {
      return formatSettingType(this, type)
    },
    formatExplainType(type) {
      return formatExplainType(this, type)
    },
    productDeviceNum() {
      productDeviceNum(null).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productId = data[0].productId
          this.productList = data
          this.listProductTemplate()
        } else {
          this.productId = null
          this.productList = []
        }
      })
    },
    listProductTemplate() {
      let r
      switch (this.templateType) {
        case 'explain':
          r = listProductTemplateExplain({
            productId: this.productId
          })
          break
        case 'setting':
          r = listProductTemplateSetting({
            productId: this.productId
          })
          break
        case 'param':
          r = listProductTemplateParam({
            productId: this.productId
          })
          break
        default:
          failureNotice(this)
          return
      }

      r.then(res => {
        const { code, data } = res
        if (code === '200') {
          if (this.name != null && this.name !== '') {
            const productTemplateList = []
            data.forEach(template => {
              if (template.name.indexOf(this.name) !== -1 || template.keyName.indexOf(this.name) !== -1) {
                productTemplateList.push(template)
              }
            })
            this.productTemplateList = productTemplateList
          } else {
            this.productTemplateList = data
          }
        } else {
          this.productTemplateList = []
        }
      })
    },
    getSystemHookDocument() {
      getSystemHookDocument().then(res => {
        const { code, data } = res
        if (code === '200') {
          this.deviceProtocolWarp = data
        }
      })
    }
  }
}
</script>

